import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import "../../api/list"
import axios from '../../utils/axios'
import { SETLIST, ALLSTATETYPE } from "../../types/store.d"
import { Tabs } from 'react-vant';
function HomePage() {
  const dispatch = useDispatch()
  useEffect(() => {
    axios.get("/api/list").then(res => {
      dispatch({
        type: SETLIST,
        payload: res.data.list
      })
    })
  }, [])

  const list = useSelector((state: ALLSTATETYPE) => {
    return state.list
  })
  return (

    <div>
      <Tabs active={0}>
        <Tabs.TabPane title="标签">
          {
            list && list.map((item, index) => {
              return <dl key={index}>
                <dt><img src={item.img} alt="" /></dt>
                <dd></dd>
                {item.title}</dl>
            })
          }
        </Tabs.TabPane>
        <Tabs.TabPane title="标签">
        </Tabs.TabPane>
      </Tabs>
    </div>
  )

}

export default HomePage
  
  
  